<template>
    <div>
        <Tabs v-model="activedPanel" @change="onPanelChange">
            <TabPanel name="极光">极光君</TabPanel>
            <TabPanel name="大司马">芜湖起飞</TabPanel>
            <TabPanel name="初见泉">初见泉</TabPanel>
        </Tabs>
    </div>
</template>

<script>
import Tabs from '@/tomatoUi/components/tabs/index.vue'
import TabPanel from '@/tomatoUi/components/tab-panel/index.vue'
import { ref } from 'vue'
export default {
    name: 'template-index',
    components: {
        Tabs,
        TabPanel,
    },
    setup() {
        const onPanelChange = name => {
            console.log(`%c 触发了change事件 %c ${name}`, 'color:green;', 'color:tomato')
        }

        return {
            activedPanel: ref('极光'),
            onPanelChange,
        }
    },
}
</script>

<style scoped></style>
